<template>
    <el-button class="button-3d-1" plain @click="backData">数据库备份</el-button>
</template>

<script>
    export default {
        name: "SysData",
        data(){

        },
        methods:{
            backData(){
                this.getRequest('/backdata').then(resp=>{
                    if (resp){
                        this.$notify({
                            title: '成功',
                            message: '备份成功，请打开路径：E:\\ZDX-back\\zdx-server\\src\\main\\resources\\static',
                            type: 'success'
                        });
                    }
                })
            }
        }
    }
</script>

<style>
    .button-3d-1{
        margin: 320px;
        position: relative;
        background: #ecd300;
        background: radial-gradient(hsl(54, 100%, 50%), hsl(54, 100%, 40%));
        font-size: 1.2rem;
        text-shadow: 0 -1px 0 #c3af07;
        color: #ff4a3b;
        border: 1px solid hsl(54, 100%, 20%);
        border-radius: 100%;
        height: 140px;
        width: 140px;
        z-index: 4;
        outline: none;

        box-shadow: inset 0 1px 0 hsl(32, 100%, 56%),
        0 2px 0 hsl(54, 100%, 20%),
        0 3px 0 hsl(54, 100%, 18%),
        0 4px 0 hsl(54, 100%, 16%),
        0 5px 0 hsl(54, 100%, 14%),
        0 6px 0 hsl(54, 100%, 12%),
        0 7px 0 hsl(54, 100%, 10%),
        0 8px 0 hsl(54, 100%, 8%),
        0 9px 0 hsl(54, 100%, 6%);
    }
    .button-3d-1:active{

        top: 3px;

        box-shadow: -3px 3px 0 hsl(16, 100%, 30%);
        box-shadow: inset 0 1px 0 hsl(54, 100%, 50%),
        0 2px 0 hsl(54, 100%, 16%),
        0 3px 0 hsl(54, 100%, 14%),
        0 4px 0 hsl(54, 100%, 12%),
        0 5px 0 hsl(54, 100%, 10%),
        0 6px 0 hsl(54, 100%, 8%),
        0 7px 0 hsl(54, 100%, 6%);
    }
</style>